<div class="tlp-framed-vertically">
    <h1 class="tlp-framed-horizontally">{{ page_title }}</h1>

    {{# has_groups }}
        <nav class="tlp-tabs">
            {{# groups }}
                <a href="permission_delegation.php?id={{ id }}" class="tlp-tab {{# is_current }}tlp-tab-active{{/ is_current }}">
                    {{ name }}
                </a>
            {{/ groups }}

            <button type="button"
                    id="siteadmin-permission-delegation-add-group"
                    class="tlp-button-primary tlp-button-outline tlp-button-mini"
            >
                <i class="fa fa-plus tlp-button-icon"></i> {{ group_action_add }}
            </button>
        </nav>

        {{# current_group }}
            {{# getGroup }}
                <div class="tlp-framed-horizontally">
                    <div id="siteadmin-permission-delegation-group-actions">
                        <button type="button"
                                id="siteadmin-permission-delegation-group-actions-edit"
                                class="tlp-button-primary tlp-button-outline tlp-button-small"
                                data-group-id="{{ id }}"
                        >
                            <i class="fa fa-pencil tlp-button-icon"></i> {{ group_action_edit }}
                        </button>

                        <button type="button"
                                id="siteadmin-permission-delegation-group-actions-delete"
                                class="tlp-button-danger tlp-button-outline tlp-button-small"
                                data-group-id="{{ id }}"
                                {{^ can_be_removed }}
                                    disabled="disabled"
                                    title="{{ cannot_remove_label }}"
                                {{/ can_be_removed }}
                        >
                            <i class="fa fa-trash-o tlp-button-icon"></i> {{ group_action_delete }}
                        </button>
                    </div>

                    {{# has_description }}
                        <div class="tlp-property">
                            <label class="tlp-label">{{ description_label }}</label>
                            <p>{{ description }}</p>
                        </div>
                    {{/ has_description }}

                    <div id="siteadmin-permission-delegation-group-details">
                        {{> permissions_list }}
                        {{> users_list }}
                    </div>
                </div>
            {{/ getGroup }}
        {{/ current_group }}
    {{/ has_groups }}
    {{^ has_groups }}
        <div class="empty-page">
            <div class="empty-page-text">{{{ purified_no_group }}}</div>
            <button type="button"
                    id="siteadmin-permission-delegation-add-group"
                    class="tlp-button-primary tlp-button-large"
            >
                <i class="fa fa-plus tlp-button-icon"></i> {{ group_action_add }}
            </button>
        </div>
    {{/ has_groups }}
</div>

{{# add_group }}
    {{> group_modal }}
{{/ add_group }}

{{# delete_group }}
    {{> delete_group_modal }}
{{/ delete_group }}

{{# edit_group }}
    {{> group_modal }}
{{/ edit_group }}

{{# add_perm_presenter }}
    {{> permissions_modal }}
{{/ add_perm_presenter }}
